import React, { useState, useEffect } from 'react'
import { Card, Table, Avatar, Button, Space, Popconfirm,Pagination } from 'antd';
import api from '../../api'
import MyBreadcrumb from '../../components/MyBreadcrumb';
import {useNavigate} from 'react-router-dom'
export default function Users() {
    const [list, setList] = useState([])
    const [total,setTotal]=useState(0)
    const [pageSize,setPageSize]=useState(10)
    const [current,setCurrent]=useState(1)

    const nav=useNavigate()
    const columns = [
        {
            title: '用户名',
            dataIndex: 'username'
        },
        {
            title: '邮箱',
            dataIndex: 'email'
        },
        {
            title: '手机',
            dataIndex: 'phone'
        },
        {
            title: '角色',
            dataIndex: 'auth',
            render: (item) => {
                return item == 1 ? '超级管理员' : item == 2 ? '普通管理员' : '暂无'
            }
        },
        {
            title: '头像',
            dataIndex: 'image',
            render: (item) => {
                return <Avatar shape="square" size={64} src={item} />
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (arg1) => {
                return (
                    <Space>
                        <Button type='primary' onClick={()=>{goUserDetail(arg1._id)}}>查看</Button>
                        <Popconfirm
                            placement="top"
                            title="提示"
                            description="您确定要删除吗?"
                            onConfirm={()=>{deleteUser(arg1._id)}}
                            okText="确认"
                            cancelText="取消">
                            <Button type='primary' danger>删除</Button>
                        </Popconfirm>
                    </Space>
                )
            }
        }

    ]
    useEffect(() => {
        getUsers()
    }, [])
    const getUsers = async (params={pageSize:10,currentPage:1}) => {
        const result = await api.users.getUsers(params)
        setList(result.data.result)
        setTotal(result.data.total)
    }

    const deleteUser = (_id) => {
        console.log('_id', _id);
    }

    const goUserDetail=(_id)=>{
        console.log('8888888888888888888888');
        console.log('_id', _id);
        nav(`/home/userDetail/${_id}`)
    }

    const onChange=(page,pageSize)=>{
        let params={pageSize,currentPage:page}
        getUsers(params)
        setCurrent(page)
        setPageSize(pageSize)
    }

    const onSizeChange=(current,pageSize)=>{
        console.log('pageSize',pageSize);
        console.log('current',current);
        let params={pageSize,currentPage:current}
        getUsers(params)
    }
    return (
        <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Card bordered={true} style={{ width: '98%', marginTop: '10px' }}>
                {/* 面包屑 */}
                <MyBreadcrumb></MyBreadcrumb>
                <Table 
                    dataSource={list} 
                    columns={columns} 
                    rowKey="_id"
                    pagination={false}></Table>
                    <Pagination 
                        style={{marginTop:'20px'}}
                        total={total}
                        pageSize={pageSize}
                        current={current}
                        showSizeChanger={true}
                        pageSizeOptions={[3,5,10,15,20]}
                        onChange={onChange}
                        onShowSizeChange={onSizeChange}>
                    </Pagination>
            </Card>
        </div>
    )
}
